<!-- 首页 -->
<template>
	<view class="container">
		<TopNav bg-color="#fff"></TopNav>

		<view class="p-l30 p-r30 m-t30">
			<view class="f-s30 text-bold">
				<text>输入短信验证码</text>
			</view>
			<view class="m-t22">
				<text class="text-gray p-r8">验证码已发送至</text>
				<text class="f-s16">{{formatPhoneNumber}}</text>
			</view>
			<view class="m-t40 p-t0">
				<u-code-input v-model="form.sms_code" :focus="true" mode="line"  maxlength="4" size="112rpx" space="60rpx"
					borderColor="#DDE0E6" :always-embed="true" :adjust-position="true" cursor-spacing="30"
					bold></u-code-input>
			</view>
			<view class="text-gray text-right m-t20" v-if="countdown>0">
				<text>{{countdown}}</text>
				<text>s后重新发送</text>
			</view>
			<view class="text-right m-t20" v-else @click="getCode" hover-class="pressed">
				<text>发送验证码</text>
			</view>
		</view>
		<view class="self-btn m-t30 margin-center" hover-class="pressed" @click="handleSubmit">
			<text>确认更换</text>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/api/login'
	import {
		orderMobile
	} from '@/api/mine'
	export default {
		name: "",
		data() {
			return {
				countdown: 60,
				form: {
					mobile: '',
					sms_code: ''
				},
				userInfo: {}
			}
		},
		onLoad(query) {
			if (query.phonenumber) this.form.mobile = query.phonenumber
			this.countdownStart()
		},
		computed: {

			formatPhoneNumber() {
				// 确保手机号是一个字符串
				let str = this.form.mobile.toString();
				// 使用正则表达式格式化
				return str.replace(/^(\d{3})(\d{4})(\d{4})$/, '\$1 \$2 \$3');
			}
		},

		methods: {
			handleSubmit() {
				this.$modal.loading('验证中')
				orderMobile(this.form).then(res => {
					this.$toast(res.msg)
					this.$store.dispatch('GetInfo').then(res => {
						this.$tab.navigateBack(2)
						this.$modal.closeLoading()
					}).catch(()=>this.$modal.closeLoading())
				})
			},
			// 获取验证码
			getCode() {
				this.$modal.loading('发送验证码')
				getCode().then(res => {
					this.$modal.closeLoading()
					this.handleResendCode()
				})
			},
			countdownStart() {
				let countdown = setInterval(() => {
					if (this.countdown === 1) clearInterval(countdown)
					this.countdown -= 1
				}, 1000)
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>